<script setup>
  import { defineProps, defineEmits, ref } from "vue";
  const emits = defineEmits(["update:modelValue"]);
  /* eslint-disable-next-line no-unused-vars */
  const props = defineProps({
    label: {
      type: String,
      default: "未定义",
    },
    name: {
      type: String,
      default: "未定义",
    },
    placeholder: {
      type: String,
      default: "********",
    },
    modelValue: {
      type: String,
      required: true,
    },
    iconClass: {
      type: String,
      default: "icon-feather-lock",
    },
    type: {
      type: String,
      default: "password",
    },
    addButton: {
      type: Boolean,
      required: false,
    },
    buttonName: {
      type: String,
      default: "按钮",
    },
    half: {
      type: Boolean,
      required: false,
    },
    failTip: {
      type: String,
      default: "格式不对",
    },
    onButtonMethod: Function, // 按钮事件
    onBlurMethod: Function, // 校验事件
  });

  const fail = ref(false);

  const updateValue = (event) => {
    emits("update:modelValue", event.target.value);
  };

  // 处理失去焦点事件
  const handleBlur = (isRequired, event) => {
    const inputValue = event.target.value; // 获取输入框的值
    if (props.onBlurMethod) {
      fail.value = props.onBlurMethod(inputValue, isRequired);
    }
  };

  // 暴露方法供父组件调用
  const triggerBlur = (inputValue, boolean) => {
    const fakeEvent = { target: { value: inputValue } }; // 构造伪事件对象
    handleBlur(boolean, fakeEvent); // 调用内部的 handleBlur
  };

  const handleButton = (event) => {
    event.preventDefault();

    if (props.modelValue === "") {
      fail.value = true;
      return;
    }
    triggerBlur(props.modelValue, false);
    if (props.onButtonMethod && !fail.value) {
      props.onButtonMethod();
    }
  };

  // 暴露方法
  defineExpose({ triggerBlur, fail });
</script>

<template>
  <div :class="{ 'uk-width-1-2@s': half }">
    <div class="uk-form-group">
      <label class="uk-form-label">{{ label }}</label>

      <div
        class="uk-position-relative w-100"
        :class="{ addButton: addButton }"
      >
        <span class="uk-form-icon">
          <i :class="iconClass"></i>
        </span>
        <input
          class="uk-input"
          :class="{ inputError: fail }"
          :type="type"
          :value="modelValue"
          :placeholder="placeholder"
          @input="updateValue"
          @blur="(event) => handleBlur(false, event)"
        />
        <button
          v-if="addButton"
          class="verficate"
          @click="handleButton"
        >
          {{ buttonName }}
        </button>
      </div>
      <!-- 使用 transition 组件包裹错误提示 -->
      <transition name="fade">
        <span
          v-if="fail"
          class="error"
          >{{ failTip }}</span
        >
      </transition>
    </div>
  </div>
</template>
<style scoped>
  .addButton {
    display: flex;
    align-items: center;
  }
  .error {
    color: red;
    font-size: 12px;
  }
  .inputError {
    border: 1px solid red;
  }
  /* 添加过渡效果 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter {
    opacity: 0; /* 进入时初始状态 */
  }
  .fade-leave-to {
    opacity: 0; /* 离开时状态 */
  }
  .verficate {
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 14px;
    border-radius: 0.5em;
    background: #e8e8e8;
    width: 150px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    margin-left: 10px;
    box-shadow:
      6px 6px 12px #c5c5c5,
      -6px -6px 12px #ffffff;
  }
  .verficate:active {
    color: #666;
    box-shadow:
      inset 4px 4px 12px #c5c5c5,
      inset -4px -4px 12px #ffffff;
  }
</style>
